<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>饱了吗管理端</title>
    <link href="../../favicon.ico" rel="shortcut icon">
    <!-- 引入样式 -->
    <link href="../../plugins/element-ui/index.css" rel="stylesheet" />
    <link href="../../styles/common.css" rel="stylesheet">
    <link href="../../styles/login.css" rel="stylesheet">
    <link href="../../styles/icon/iconfont.css" rel="stylesheet" />
    <style>
        .body {
            min-width: 1366px;
        }
    </style>
</head>

<body>
    <div class="login" id="login-app">
        <div class="login-box">
            <img alt="" src="../../images/login/login-l.png">
            <div class="login-form">
                <el-form :model="loginForm" :rules="loginRules" ref="loginForm">
                    <div class="login-form-title">
                        <img alt="" src="../../images/login/logo.png" style="width:139px;height:42px;" />
                    </div>
                    <el-form-item prop="username">
                        <el-input auto-complete="off" maxlength="20" placeholder="账号" prefix-icon="iconfont icon-user" type="text" v-model="loginForm.username" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input @keyup.enter.native="handleLogin" maxlength="20" placeholder="密码" prefix-icon="iconfont icon-lock" type="password" v-model="loginForm.password" />
                    </el-form-item>
                    <el-form-item style="width:100%;">
                        <el-button :loading="loading" @click.native.prevent="handleLogin" class="login-btn" size="medium" style="width:100%;" type="primary">
                            <span v-if="!loading">登录</span>
                            <span v-else>登录中...</span>
                        </el-button>

                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../js/validate.js"></script>
    <script src="../../api/login.js"></script>

    <script>
        new Vue({
            el: '#login-app',
            data() {
                return {
                    loginForm: {
                        username: 'admin',
                        password: '123456'
                    },
                    loading: false
                }
            },
            computed: {
                loginRules() {
                    const validateUsername = (rule, value, callback) => {
                        if (value.length < 1) {
                            callback(new Error('请输入用户名'))
                        } else {
                            callback()
                        }
                    }
                    const validatePassword = (rule, value, callback) => {
                        if (value.length < 6) {
                            callback(new Error('密码必须在6位以上'))
                        } else {
                            callback()
                        }
                    }
                    return {
                        'username': [{
                            'validator': validateUsername,
                            'trigger': 'blur'
                        }],
                        'password': [{
                            'validator': validatePassword,
                            'trigger': 'blur'
                        }]
                    }
                }
            },
            created() {},
            methods: {
                async handleLogin() {
                    this.$refs.loginForm.validate(async(valid) => {
                        if (valid) {
                            this.loading = true
                            let res = await loginApi(this.loginForm)
                            if (String(res.code) === '1') { //1表示登录成功
                                localStorage.setItem('userInfo', JSON.stringify(res.data))
                                window.location.href = '/backend/index.html'
                            } else {
                                this.$message.error(res.msg)
                                this.loading = false
                            }
                        }
                    })
                },

            }
        })
    </script>
</body>

</html>